<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画_其他属性</title>
  <style>
    .outer{
      width: 1000px;
      height: 100px;
      border: 1px solid black;
    }

    @keyframes goRight {

      0%{}

      100%{
        transform: translate(900px) rotate(360deg);
        background-color: red;
        border-radius: 50%
      }
    }

    .inner{
      width: 100px;
      height: 100px;
      background-color: blue;
      animation-name: goRight;
      animation-duration: 3s;
      animation-delay: 2s;
      /*其他属性--start*/
      /*animation-timing-function: steps(200);*/
      /*  设置动画方式*/
      animation-timing-function: linear;
    /*  设置动画播放次数*/
      animation-iteration-count: 3;/*infinite为无限次数*/
      /*动画方向*/
      animation-direction: alternate-reverse;/*normal:正常,reverse:反转,alternate:往复运动,alternate-reverse反转方向往复运动*/
      /*动画以外的状态(不发生动画的时候在什么位置)*/
      animation-fill-mode: backwards;/*forward:最后一帧的位置,backwards:最开始的位置*/
      /*动画播放状态*/
      animation-play-state: running;/*默认为running,运动(播放)*/

    }
    .outer:hover .inner{
      /*动画播放状态*/
      animation-play-state: paused;/*paused暂停,*/
    }

  </style>

</head>
<body>


<div class="outer">
  <div class="inner"></div>
</div>
</body>
</html>